<template>
  <div class="app-container">

    <el-select v-model="value" placeholder="请选择" @change="getList">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="kind"
        label="分类"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import article from "@/api/article/article"
export default{
  data(){
    return{
      list:null,//查询后的接口集合
      options: [{
        value: '推荐',
        label: '推荐'
      }, {
        value: '热点',
        label: '热点'
      }, {
        value: '创新',
        label: '创新'
      },
        {
          value: '科技',
          label: '科技'
        },
        {
          value: '娱乐',
          label: '娱乐'
        },
        {
          value: '体育',
          label: '体育'
        },
        {
          value: '时尚',
          label: '时尚'
        },
      ],
      value: ''
    }
  },
  created(){
  },
  methods:{
    getList(page=1){
      this.page=page
      article.kindArticle(this.value)
        .then(response=>{
          this.list=response.data.rows
        })
    },
    }
}
</script>
